<template>
  <div>
      <el-dialog
        custom-class="my-dialog"
        title="充值次数"
        :visible="true"
        width="440px"
        :close-on-click-modal="false"
        :before-close="closeGoods"
      >
        <div class="box" style="padding-right:0;" v-if="goodsList && goodsList.length > 0">
          <div class="goods-list">
            <div class="goods" :class="{active: item.id === goods_id}" v-for="(item,index) in goodsList" @click="chooseGoods(item.id)">
              <div class="title">
                <span class="num">{{item.num}}</span>
                <span class="unit">条</span>
              </div>
              <div class="price">特价<span>{{item.price / 100}}</span>元</div>
              <div class="market_price" v-if="item.market_price > 0">原价{{item.market_price / 100}}元</div>

            </div>
            <div style="clear: both;"></div>
          </div>
          <div v-if="pay_url" style="margin: 0 10px; background: #f3f6f9; border-radius: 10px; padding: 20px;">
            <div class="box-title" style="text-align: center;">
              <span>微信扫码付款</span>
            </div>
            <div class="qrcode">
              <vue-qr :text="pay_url" :size="160" />
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="default" icon="el-icon-check" size="small" @click="checkPay">我已付款</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import { getGoodsList, createOrder, checkPay } from '@/api/order'
import vueQr from 'vue-qr'
export default {
  components: { vueQr },
  data() {
    return {
      goodsList: [],
      goods_id: 0,
      order_id: '',
      pay_url : '',
      checkPaySi: 0
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    getGoodsList() {
      getGoodsList().then(res => {
        const goodsList = res.data
        this.goodsList = goodsList
        if (goodsList && goodsList.length > 0) {
          for (var i = 0; i<goodsList.length; i++) {
            if (goodsList[i].is_default) {
              this.chooseGoods(goodsList[i].id)
              break;
            }
          }
        }
      }).catch(res => {
        if (res.errno === 403) {
          this.showLogin()
        }
      })
    },
    chooseGoods(goods_id) {
      this.goods_id = goods_id
      this.stopCheckPay()
      this.createOrder()
    },
    createOrder() {
      createOrder({
        goods_id: this.goods_id
      }).then(res => {
        this.order_id = res.data.order_id
        this.pay_url = res.data.pay_url
        this.checkPaySi = setInterval(() => {
          this.checkPay()
        }, 3000)
      }).catch(res => {
        if (res.errno === 403) {
          this.showLogin()
        }
      });
    },
    stopCheckPay() {
      if (this.checkPaySi) {
        clearInterval(this.checkPaySi)
        this.checkPaySi = 0
      }
    },
    closeGoods() {
      this.stopCheckPay()
      this.$emit('close')
    },
    checkPay() {
      checkPay({
        order_id: this.order_id
      }).then(res => {
        if (res.data.ispay) {
          this.$message.success('付款成功')
          window.location.reload()
        }
      }).catch(res => {
        if (res.errno === 403) {
          this.showLogin()
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
  .box-title {
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    .desc {
      font-weight: normal;
      color: #999;
      font-size: 14px;
      margin-left: 10px;
    }
  }
  .goods-list {
    padding: 0 0 0 10px;

    .goods {
      background: #f3f6f9;
      width: 120px;
      height: 110px;
      text-align: center;
      padding: 15px 0;
      float: left;
      margin-right: 10px;
      box-sizing: border-box;
      border: 3px solid #f3f6f9;
      margin-bottom: 15px;
      cursor: pointer;
      border-radius: 10px;

      .title {
        font-size: 24px;
        display: flex;
        align-items: baseline;
        justify-content: center;
        font-weight: bold;
        color: #333;
        .unit {
          font-size: 14px;
          margin-left: 10px;
          font-weight: normal;
        }
      }
      .price {
        font-size: 14px;
        margin: 10px 0;
        color: #333;
        span {
          color: red;
          margin: 0 3px;
        }
      }
      .market_price {
        color: #888;
        text-decoration: line-through;
        font-size: 12px;
      }
      &.active {
        border-color: #04BABE;
      }
    }
  }
  .qrcode {
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #DCDFE6;
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }

</style>

